<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>排序瀑布流</title>
	<style type="text/css">
		 *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 1050px;
            height: auto;
            overflow: hidden;
            background-color: orange;
            margin: 0 auto;
        }
        .box_a{
            width: 200px;
            float: left;
            height: auto;
            margin: 0 5px;
        }
        .item{
        	/*子集    每一个小块儿*/
            margin: 5px 0;
             border-radius: 8px;
            width: 100%;
        }
        img {
        	width: 100%;
        	height: 80px;
        	vertical-align: middle;
        }
        .title{
        	
        }
        
	</style>
</head>
<body>
	<div class="box">
        <div class="box_a"></div>
        <div class="box_a"></div>
        <div class="box_a"></div>
        <div class="box_a"></div>
        <div class="box_a"></div>  
        <!-- 可以在这里通过控制 css 和 html来改变行和列的个数 -->
        <!-- 当然现在这个是没有数据效果的  -->
        <!--<div class="box_a">
        	<div></div>
        	<div></div>
        	<div></div>
        </div>-->
    </div>
</body>
</html>
<!-- <script src="js/data.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript">  
	//	思路分析
		//		瀑布流布局的特点是等宽不等高(等高不等宽)  分两种
		//		从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。
		//      实现的方法有多种  定位 浮动 弹性盒 排序  ...
			    //获取类数组转数组
        let boxs = document.querySelectorAll('.box_a');
        let arr = [...boxs]
        laoding()   //调用函数           默认走40个
        
    function laoding(){
        for(let i=0; i<40; i++){
        // console.log(arr)
        let oDiv = document.createElement('div');
        oDiv.style.height = mathHeight()
        oDiv.style.backgroundColor = mathColor()
        oDiv.className = 'item'
        
        //解析数据   obj
//      oDiv.innerHTML = `
//          <div><img src="${obj[i].img}" alt="" /></div>
//          <div>${obj[i].title}</div>
//      	<div>${obj[i].money}</div>
//      `
        
        //排序
        let narr = arr.sort(function(a, b){
            return a.offsetHeight - b.offsetHeight
            //对比是的当前项的 高度
            //升序  排序第0个为最短的 进行插入
        })
        // console.log(narr[0])
        narr[0].appendChild(oDiv)
        }
    }

    //随机色
      function mathColor(){
         return "rgba(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ",1)"; 
     }
      
	//随机高
    function mathHeight(){
        var h = Math.round(Math.random()*(300-150)+150)
        return h +'px'
    }

    //滚动加载 ...
    //当然这里还有拓展功能 比如点击按钮/移入 加载调用这个函数即可
    onscroll = function(){
        let oSll = document.documentElement.scrollTop  //可视区的高度
        let hei = innerHeight
        let offhei = document.body.offsetHeight        //页面高度
        console.log(oSll, hei)						   //
        if(oSll+hei >= offhei-200){                    //页面滚动值+页面高度>=窗口的高度  -200     加载数据
           laoding()                                   //调取函数    再次走数据
        }
    }
    
    
</script>